  
  define([
    'jQuery',
    'Underscore',
    'Backbone',
    'libs/require/text!templates/facebook/fb-connect.html',
    'libs/require/text!templates/facebook/fb-user.html'
    
  ], function($, _, Backbone, FbConnectTemplate, FbUserTemplate){
    
        var iltsApp =  iltsApp || {};
        iltsApp.FB = iltsApp.FB || {}; 
        
        iltsApp.FB = Backbone.View.extend({

          el: $('body'),
          
          FbConnectBarText : { message : 'Connect with Facebook if you want to fully live the experience' },
          FbConnectEl      : '#facebook_connect',
          sidebar          : '.sidebar',
          FbUserName       : '#facebook_user_name',
          FbUserEl         : '#facebook_login_status',

          initialize: function(){

            _.bindAll(this, 'addFbConnectBar', 'addFbUserBox', 'FbConnectBtn', 'FbLogin', 'FbLogout'); 

          },

          events: { 
            'click #facebook_connect_button': 'FbConnectBtn',
            'click #facebook_user_logout a' : 'FbLogout'
          }, 

          
          // add fb connect bar on the page bottom
          addFbConnectBar : function() {
            
            var FbConnect = _.template(FbConnectTemplate, this.FbConnectBarText);
            $(this.el).append(FbConnect);
            $(this.FbConnectEl).slideToggle(600);
            
          },
          
          // add fb user box
          addFbUserBox : function() {
            
            var FbUser = _.template(FbUserTemplate); 
            
            $(this.sidebar).prepend(FbUser);
            
            var FbUserName = this.FbUserName;
            var FbUserEl   = this.FbUserEl;
            
            FB.api('/me', function(response) {
              $(FbUserName).html(response.first_name);
              $(FbUserEl).slideToggle(600);
            });
            
          },
          
          // trigger fb connect button click
          FbConnectBtn : function(e) {
              
            e.preventDefault();
            FB.login(function(response) {
              if (response.status === 'connected') {
                // user is now logged in
              } else {
                // user is now logged in
                console.log('User is logged out');
              }
            });    
            
          },

          // Facebook login
          FbLogin : function() {
              
            $(this.FbConnectEl).slideToggle(600, function() { 
                $(this.FbConnectEl).remove();
                window.location.reload();
            }); 
            
          },

          // Facebook logout
          FbLogout : function() {
              
            $(this.FbUserEl).slideToggle(600, function() {
              FB.logout(function(response) {
                // user is now logged out
                $(this.FbUserEl).remove();
                window.location.reload();
              });
                
            });
            
          }
          
        });  
        

        return new iltsApp.FB;
  
  });  
  

  

